<template>
  <div class="model-box">
    <headerComponent :title="modulName" router="/home"></headerComponent>
    <div style="padding: 0 20px;" v-if="modulList.length">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index) in modulList" :key="index">
          <div class="model-list f_row flex_warp">
            <router-link :to="`/detail?moduleId=${sitem.moduleId}&id=${sitem.id}`" v-for="(sitem,sindex) in item.itemList" :key="sindex" class="model-item f_col">
              <img :src="sitem.avatarPath" alt="" />
              <div class="model-item-mask"></div>
              <div class="model-desc f_col f_r_cnt">
                <p class="model-desc-title">{{sitem.name}}</p>
              </div>
            </router-link>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="empty-box f_col f_r_cnt f_jc_cnt" v-else><img src="../assets/empty.png"/><p>很抱歉,暂无详细数据~</p></div>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import headerComponent from '../components/header'
export default {
  components: {headerComponent, swiper, swiperSlide},
  name: 'model',
  data () {
    return {
      moduleId: this.$route.params.id,
      modulList: [], // 外层list
      modulName: '',
      swiperOption: {
        notNextTick: true,
        centeredSlides: true
      }
    }
  },
  mounted () {
    let data = localStorage.getItem('data')
    let dataObj = JSON.parse(data)
    let pageSize = 1
    let list = dataObj[`M-${this.moduleId}`]
    let moduItem = dataObj.moduleList.find(item => {
      return parseInt(item.id) === parseInt(this.moduleId)
    })
    console.log('current moduItem', moduItem)
    this.modulName = moduItem.name
    if (list && list.length) {
      let totalPage = Math.ceil(list.length / pageSize)
      for (let i = 0; i < totalPage; i++) {
        let itemList = list.slice(i * pageSize, pageSize * (i + 1))
        let itemObj = {itemList: itemList}
        this.modulList.push(itemObj)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus">
.model-box
  height 100%
  width 100%
  box-sizing border-box
  .empty-box
    width 100%
    height 100%
    font-size 14px
    margin-top -50px
    img
      width 200px
      height 200px
  .model-list
    padding 20px 10px
    box-sizing border-box
    .model-item
      position: relative
      width 100%
      box-sizing border-box
      img
        width 100%
        height 500px
        display block
      .model-item-mask
        position absolute
        top 0
        height 100%
        bottom 0
        left 0
        right 0
        background rgba(0,0,0,.3)
      .model-desc
        padding 10px 20px
        height 40px
        border 1px solid #dddddd
        border-top 0
        .model-desc-title
          font-size 20px
          font-weight 600
          color #333
        .model-desc-desc
          font-size 14px
          color #666
</style>
